<template>
  <div>
    <div style="height:500px">
      <codemirror  style="height:500px" ref="myCodeMirror" v-model="code" :options="cmOptions" />
    </div>
  </div>
</template>

<script>
//codemirror

import {codemirror} from 'vue-codemirror'
import {mapMutations} from 'vuex'
import 'codemirror/lib/codemirror.css'
import beautify from 'js-beautify';
export default {
  name: 'Codemirror',
  props:{
    itemCodes:{ //
       type:String
    }
  },
  watch:{

    itemCodes(newVal){ //监听父传子的数据
      this.code=''
      this.code=beautify(newVal,{indent_size: 2})//
      console.log(this.code,"-------34534534---------code-------------")
      this.changeCode(this.code) //mutation方法
    },
    code(newVal){ //监听代码编辑器的code变化
      this.changeCode(newVal) //mutation方法
    }
  },
  components:{codemirror},
  beforeMount() {
    this.code=beautify(this.itemCodes,{indent_size: 2})//
  },
  data() {
    return {
      code:"",//收集代码
      cmOptions:{
           mode: 'text/javascript',//代码格式
          theme: 'base16-dark',//主题颜色
          lineNumbers: true,//是否显示行号
          line: true,
          fontSize: 20,
      },//代码编辑器的配置项
    };
  },

  mounted() {
    
  },

  methods: {
    ...mapMutations(["changeCode"]) //改变vuex中的图表code
  },
};
</script>
<style lang="scss">
    .CodeMirror{
      height: 500px;
    }
</style>